<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :default-config="toolbarConfig" :mode="mode" />
    <Editor
      v-model="valueHtml"
      style="height: 500px; overflow-y: hidden"
      :default-config="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
    <a-button type="primary" @click="handleSave">保存</a-button>
  </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const editorRef = shallowRef()
const mode = ref('default')
const editorConfig = { placeholder: '请输入内容...' }
// 内容 HTML
const valueHtml = ref('<p>hello</p>')
const toolbarConfig = {}
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
const handleSave = () => {
  console.log(valueHtml.value)
}
</script>
<style></style>
